<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称:</span>
      <el-input v-model.trim="params.poleName" clearable placeholder="请输入一体杆名称" class="search-main" size="mini" @clear="getdata" />
      <span class="search-label">一体杆编号:</span>
      <el-input v-model.trim="params.poleNumber" clearable placeholder="请输入一体杆编号" class="search-main" size="mini" @clear="getdata" />
      <span class="search-label">状态：</span>
      <el-select v-model="params.poleStatus" size="mini" clearable @clear="getdata">
        <el-option
          v-for="item in options"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
      <el-button type="primary" class="search-btn" size="mini" @click="getPoleList">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" size="mini" @click="addPole">添加一体杆</el-button>
      <el-button size="mini" @click="batchDel">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="poleList" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName" width="180" />
        <el-table-column label="一体杆编号" prop="poleNumber" width="180" />
        <el-table-column label="一体杆IP" prop="poleIp" width="180" />
        <el-table-column label="安装区域" prop="areaName" width="180" />
        <el-table-column label="一体杆类型" prop="poleType" width="180" :formatter="formatStatus" align="center" />
        <el-table-column label="	运行状态" prop="poleStatus" align="center">
          <template #default="{row}">
            <el-button :type="formartWaringButton(formatPoleStatus(row))" size="mini" round>
              {{ formatPoleStatus(row) }}
            </el-button>

          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </div>

    <!-- 添加一体杆弹框  @close="closeDialog"-->
    <el-dialog
      title="添加一体杆"
      :visible="dialogVisible"
      width="580px"
      @close="canc"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="100px">
          <el-form-item label="一体杆名称" prop="poleName">
            <el-input v-model="addForm.poleName" />
          </el-form-item>
          <el-form-item label="一体杆编号" prop="poleNumber">
            <el-input v-model="addForm.poleNumber" :disabled="!!addForm.id" />
          </el-form-item>
          <el-form-item label="一体杆IP" prop="poleIp">
            <el-input v-model="addForm.poleIp" />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId">
            <el-select v-model="addForm.areaId" placeholder="请选择关联区域" size="medium" style="width:100%">
              <el-option v-for="item in dropList" :key="item.areaId" :value="item.areaId" :label="item.areaName" />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType">
            <el-select v-model="addForm.poleType" placeholder="请选择一体杆类型" size="medium" style="width:100%">
              <el-option v-for="item in poleType" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="canc">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>

      </template>
    </el-dialog>

  </div>
</template>

<script>
import {
  getPoleListAPI,
  getAssociatedRegion,
  createPoleAPI,
  updataPoleAPI,
  delPoleByIds
} from '@/api/pole.js'
export default {
  name: 'Monopole',
  data() {
    return {
      options: [
        {
          value: undefined,
          label: '全部'
        },

        {
          value: 0,
          label: '正常'
        }, {
          value: 1,
          label: '异常'
        }],
      value: '',

      params: {
        page: 1,
        pageSize: 10,
        poleName: '',
        poleNumber: '',
        poleStatus: ''
      },
      poleForm: {
        id: undefined,
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaName: '',
        areaId: '',
        poleType: 'entrance',
        poleStatus: ''
      },
      poleList: [],
      total: 0,
      addForm: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      // 一体杆下拉列表
      dropList: [],
      poleType: [
        { value: 'entrance', label: '入口' },
        { value: 'export', label: '出口' }
      ],
      dialogVisible: false,
      addFormRules: {
        poleName: [{ required: true, message: '请输入一体杆名称', trigger: 'blur' }],
        poleNumber: [{ required: true, message: '请输入一体杆编号', trigger: 'blur' }],
        poleIp: [{ required: true, message: '请输入一体杆IP', trigger: 'blur' }],
        areaId: [{ required: true, message: '请选择关联区域', trigger: 'change' }],
        poleType: [{ required: true, message: '请选择一体杆类型', trigger: 'change' }]
      },
      delIds: ''
    }
  },

  async created() {
    await this.getPoleList()
    await this.getDropDownList()
  },

  methods: {
    async getPoleList() {
      const res = await getPoleListAPI(this.params)
      this.total = res.data.total
      this.poleList = res.data.rows
    },
    del(id) {
      this.$confirm('您确定要删除该一体杆吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPoleByIds(id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getPoleList()
      })
    },

    // 取消
    canc() {
      this.resetForm()
      this.$refs.addForm.resetFields()
      this.dialogVisible = false
    },

    // 编辑
    edit(row) {
      const { id, poleName, poleNumber, poleIp, areaId, poleType } = row
      this.addForm = { id, poleName, poleNumber, poleIp, areaId, poleType }
      this.dialogVisible = true
    },

    getdata() {
      this.getPoleList()
    },

    formatStatus(row) {
      const MAP = {
        'entrance': '入口',
        'export': '出口',
        'center': '中心'
      }
      return MAP[row.poleType]
    },
    formatPoleStatus(row) {
      const MAP = {
        0: '正常',
        1: '异常'
      }
      return MAP[row.poleStatus]
    },
    formartWaringButton(str) {
      const MAP = {
        '正常': 'success',
        '异常': 'error'
      }
      return MAP[str]
    },

    changePage(value) {
      this.params.page = value
      this.getPoleList()
    },

    // 添加一体杆
    async addPole() {
      this.dialogVisible = true
    },

    // 获取关联区域列表
    async getDropDownList() {
      const res = await getAssociatedRegion()
      this.dropList = res.data
    },

    // 重置表表
    resetForm() {
      this.addForm = {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      }
    },
    // 新增
    confirmAdd() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          if (this.addForm.id) {
            await updataPoleAPI(this.addForm)
          } else {
            await createPoleAPI(this.addForm)
          }

          this.$message({
            type: 'success',
            message: `${this.addForm.id ? '修改' : '添加'}一体杆成功`
          })
          this.getPoleList()
          this.resetForm()
          this.$refs.addForm.resetFields()
          this.dialogVisible = false
        }
      })
    },
    handleSelectionChange(value) {
      if (value && value.length > 0) {
        this.delIds = value.map(item => item.id).join(',')
      }
    },
    batchDel() {
      if (!this.delIds) {
        return this.$message({
          type: 'error',
          message: '请选择要删除的数据'
        })
      }

      this.$confirm(`你确定要删除选中的${this.delIds.split(',').length > 0 ? this.delIds.split(',').length : ''}条数据吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPoleByIds(this.delIds)
        this.getPoleList()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.delIds = ''
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消'
        })
        this.getPoleList()
        this.delIds = ''
      })
    }

  }

}

</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 30px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}

//一体杆label
.search-label{
  margin-right: 10px;
  font-size: 16px;
}
</style>
